<template>
  <div id="app">
    <!--<transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft">-->
      <router-view></router-view>

    <!--</transition>-->
    <!--<portrait v-if="boot==='portrait'"></portrait>-->
    <!--<landscape v-else-if="boot==='landscape'"></landscape>-->
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'app',
    created() {
    this.$store.dispatch('windowResize');
    window.addEventListener("resize", () => {
      this.$store.dispatch('windowResize');
      });
    },
    computed: {
      ...mapState({
        boot: state => state.screen
      })
    }
  }
</script>

<style>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  #app {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    /*overflow: hidden;*/
  }

  .animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
</style>
